import React, { Component } from 'react';
import './5css.css'
class DemoComment extends Component {
    state = { 
        title:'',
        content:'',
        list:[
            {
                title:'评论人 : rose',
                content:'评论内客: 楼主好人'
            }
        ]
     } 
     updateTitle=(e)=>{
        // console.log(e);
        let title =e.target.value
        this.setState({
            title
        })
    }
    updateContent=(e)=>{
        this.setState({
            content:e.target.value
        })
    }
    // 发布
    release=()=>{
        console.log(this.state);
        // 组装数据格式
        const {title,content}=this.state
        let newArr=this.state.list.concat([{title,content}])
        this.setState({
            list:newArr
        })
    }
    // 删除
    del=(index)=>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
    }
    render() { 
        return (<>
            <h2>5.案例-发表评论</h2>
            <div className='comment'>
                <div className='header'>
                    <input type="text" placeholder='请输入评论人' value={this.state.title} onChange={this.updateTitle}/>
                </div>
                <div className='content'>
                    <textarea name="" id="" cols="30" rows="10" placeholder='请输入评论内容' onChange={this.updateContent}></textarea>
                </div>
                <button onClick={this.release}>发表评论 </button>
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item,index)=><li key={index}>
                                <h3>{item.title}</h3>
                                <p>{item.content}</p>
                                <button onClick={()=>this.del(index)}>删除评论</button>
                            </li>)
                        }         
                    </ul>
                </div>
            </div>
        </>);
    }
}
 
export default DemoComment;